section.explorer {

    .selectable.selected {
        -webkit-box-shadow: 0 0.05em 0.2em 0 rgba(0, 0, 0, 0.2);
        box-shadow: 0 0.05em 0.2em 0 rgba(0, 0, 0, 0.2);
        background: #7fa0eb;

    }
    
    .selection {
        background: rgba(0, 0, 255, 0.1);
        border-radius: 0.1em;
        border: 0.05em solid rgba(0, 0, 255, 0.2);
    }

    div[for="control"] {
        display: flex;
        justify-content: flex-start;
        margin: 15px;
        flex-wrap: wrap;
        user-select: none;

        form {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            * {
                margin: 2px;
            }
        }

        &>button {
            margin: 2px;
        }

    }

    div[for="show-lists"] {
        div[role="lists"] {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            .list-child {
                display: flex;
                flex-direction: column;
                box-shadow: 0 0 2px #bbb;
                align-items: center;
                max-width: 160px;
                a {
                    text-decoration: none;
                    i {
                        font-size: 5em;
                        color: rgb(140, 210, 240)
                    }
                }

                span {
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                    margin: 0px 3px 3px 3px;
                    color: rgb(87, 87, 87);
                    font-size: 0.8em;
                }
            }
        }
    }
}

@media only screen and (max-width: 600px) {
    section.explorer {

        div[for="control"] {
            margin-top: -20px;
        }

        div[for="show-lists"] {
            div[role="lists"] {
                .list-child {
                    margin: 10px 10px;
                }
            }
        }
    }
}

@media only screen and (min-width: 601px) {
    section.explorer {

        div[for="control"] {
            margin-top: -20px;
        }

        div[for="show-lists"] {
            div[role="lists"] {
                .list-child {
                    margin: 10px 15px;
                }
            }
        }       
    }
}